<template>
	<view>
		<!--
		<view class="top-info">
			<view class="info-number">
				<text class="info-number-text">{{result}}</text>
				<text class="info-number-unit">{{props.unit}}</text>
			</view>
			<view class="info-mark" :style="{ borderTopColor: '#23E2A6' }"></view>
		</view>
		-->
		<view class="scroll-content">
			<!--
			<view @touchstart="start" @touchmove="move" @touchend="end" class="scroll-mask">
				<view class="mask-left"></view>
				<view class="mask-middle">
					<view class="mask-middle-line"></view>
				</view>
				<view class="mask-right"></view>
			</view>
			-->
			<view @touchstart="start" @touchmove="move" @touchend="end" class="scroll-view" :style="{transform:transform}">
				<view class="sides"></view>
				<view @tap="onClick(index)" v-for="(item,index) in props.unitList" class="item" :class="{result:result==index}">{{item.dw}}</view>
				<view class="sides"></view>
			</view>
		</view>
	</view>
</template>  
  
<script setup lang="tsx">
import { ref,nextTick,defineEmits } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
//import BigNumber from "bignumber.js";

interface Props {
	unit?:string
	unitList?:any
}
const props = withDefaults(defineProps<Props>(), {
	unit:"克",
	unitList:[],
});
const startX = ref(0); // 手指按下的位置  
const scrollX = ref(0); // 元素当前的位置 
const transform = ref("translateX(0)");
onLoad(()=>{
	//设置初始化位置
	//let distance = (props.init - props.min) / props.interval * 7;
	//scrollX.value = -distance;
	let index = props.unitList.findIndex((item:any) => item.dw==props.unit);
	let distance = (index * 60) + 30;
	scrollX.value = -distance;
	
	transform.value = `translateX(${scrollX.value}px)`;
	nextTick(()=>{
		countResult();
	});
});

let startTime = 0; // 手指按下的时间  
//let velocity = 0; // 初始速度  
const start = (event:any) => {
	startX.value = event.touches[0].clientX;  
	startTime = Date.now();  
	//startTime.value = Date.now();  
}
//const lineWidth = uni.upx2px(2);//刻度线的宽度
//const intervalWidth = uni.upx2px(5);//间隔的宽度
//const screenWidth = uni.getSystemInfoSync().screenWidth;//屏幕的宽度
//const delta = ref(0);
const move = (event:any) => {
	const touch = event.touches[0];  
	const deltaX = (touch.clientX - startX.value); // 滑动的距离  
	//const deltaTime = Date.now() - startTime; // 滑动的时长  
	//var velocity = deltaX / deltaTime; // 滑动的速度（像素/毫秒）  
	
	//scrollX.value += (deltaX + velocity * 100); // 更新元素的位置
	scrollX.value += deltaX
	
	startX.value = touch.clientX; // 更新手指按下的位置为当前位置  
	
	countResult();
	
	transform.value = `translateX(${scrollX.value}px)`;
}
//补齐
const adjustToSix = (num:number) => {
	if(num<30)return 0;
    let remainder = num % 60;
	//console.log(num,remainder)
	if (remainder < 30) {
		return num - remainder + 30;  
	} else {  
		return num + (60 - remainder) - 30;  
	} 
}
//let distance = (props.max - props.min) / props.interval * 7;//左右边
let distance = props.unitList.length * 60 - 30;//左右边

const end = () => {
	scrollX.value = -(adjustToSix((-scrollX.value)));
	if(scrollX.value>-30)scrollX.value = -30;//设置不超过最左边；
	//设置最大值不超过最右边
	if((-scrollX.value)>distance) scrollX.value = -distance;
	
	transform.value = `translateX(${scrollX.value}px)`;
	
	nextTick(()=>{
		countResult();
	});
}
const onClick = (index:number) => {
	let distance = (index * 60) + 30;
	scrollX.value = -distance;
	transform.value = `translateX(${scrollX.value}px)`;
	nextTick(()=>{
		countResult();
	});
}
const emit = defineEmits(["onResult"])
//计算结果
const result = ref(0);
const countResult = () => {
	//let multiple = (-scrollX.value) / 7;
	//console.log((-scrollX.value-30)/60)
	//let str = (new BigNumber(multiple).times(new BigNumber(props.interval)).plus(new BigNumber(props.min)).toNumber()).toFixed(props.decimal)
	//console.log(multiple)
	//result.value = Number(str);
	result.value = Number(((-scrollX.value-30) / 60).toFixed(0));
	//let unitUnit = "克"
	if(result.value>=0&&result.value<props.unitList.length){
		emit("onResult", props.unitList[result.value].dw);
	}
	//console.log(index)
	
}
</script>  
<style lang="scss" scoped>  
.top-info{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 13rpx;
	.info-number{
		position: relative;
		.info-number-text{
			font-size: 50rpx;
			font-family: 'din',DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
		}
		.info-number-unit{
			position: absolute;
			bottom: 6rpx;
			right: -30rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.info-mark{
		border-left: 10rpx solid transparent;   /* 左边框 */  
		border-right: 10rpx solid transparent;  /* 右边框 */  
		border-top-width: 15rpx;
		border-top-style: solid;
	}
}
.scroll-content{
	position: relative;
	height: 120rpx;
	
	.scroll-mask{
		position: absolute;
		top: 0;
		width: 100vw;
		height: 120rpx;
		z-index: 10;
		display: flex;
		.mask-left{
			width: 260rpx;
			height: 100%;
			/*background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);*/
		}
		.mask-middle{
			flex: 1;
			position: relative;
			.mask-middle-line{
				position: absolute;
				top:0;
				left:50%;
				transform:translateX(-50%);
				
				width: 1px;
				height: 67rpx;
				background: #23E2A6;
			}
		}
		.mask-right{
			width: 260rpx;
			height: 100%;
			//background: linear-gradient(180deg, rgba(255,255,255,0) 100% , #FFFFFF 0%);
			/*background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%); */
		}
	}
	
	.scroll-view{
		z-index: 8;
		position: absolute;
		height: 120rpx;
		top:0;
		left: 0;
		white-space: nowrap;
		transition: transform 0.2s ease-out;
		.sides{
			display: inline-block;
			
			width: calc(50vw);
		}
		.item{
			position: relative;
			display: inline-block;
			height: 120rpx;
			width: 60px;
			white-space: normal;
			text-align: center;
			padding: 40rpx 5px 0 5px;
		}
		.result{
			color: #1DC691;
		}
		
	}
}


</style>